<template>
  <div style="width: 100%;height: 100%">
    <dv-scroll-board :config="config" style="width: 100%;height: 95%"/>
  </div>
</template>

<script>
import {currentGET} from "api";

export default {
  data() {
    return {
      config: {
        header: ['编号', '产品', '型号', '规格', '单位', '库存', '已生产', '代生产', '碳排放'],
        data: [
          ['<span style="color:#37a2da;">行1列1</span>', '行1列2', '行1列3', '行1列3', '行1列3', '行1列3', '行1列3', '行1列3', '行1列3'],
          ['行2列1', '<span style="color:#32c5e9;">行2列2</span>', '行2列3', '行1列3', '行1列3', '行1列3', '行1列3', '行1列3', '行1列3'],
          ['行3列1', '行3列2', '<span style="color:#67e0e3;">行3列3</span>', '行1列3', '行1列3', '行1列3', '行1列3', '行1列3', '行1列3'],
          ['行4列1', '<span style="color:#9fe6b8;">行4列2</span>', '行4列3', '行1列3', '行1列3', '行1列3', '行1列3', '行1列3', '行1列3'],
          ['<span style="color:#ffdb5c;">行5列1</span>', '行5列2', '行5列3', '行1列3', '行1列3', '行1列3', '行1列3', '行1列3', '行1列3'],
          ['行6列1', '<span style="color:#ff9f7f;">行6列2</span>', '行6列3', '行1列3', '行1列3', '行1列3', '行1列3', '行1列3', '行1列3'],
          ['行7列1', '行7列2', '<span style="color:#fb7293;">行7列3</span>', '行1列3', '行1列3', '行1列3', '行1列3', '行1列3', '行1列3'],
          ['行8列1', '<span style="color:#e062ae;">行8列2</span>', '行8列3', '行1列3', '行1列3', '行1列3', '行1列3', '行1列3', '行1列3'],
          ['<span style="color:#e690d1;">行9列1</span>', '行9列2', '行9列3', '行1列3', '行1列3', '行1列3', '行1列3', '行1列3', '行1列3'],
          ['行10列1', '<span style="color:#e7bcf3;">行10列2</span>', '行10列3', '行1列3', '行1列3', '行1列3', '行1列3', '行1列3', '行1列3']
        ],
        index: true,
        columnWidth: [50],
        align: ['center']
      }
    }
  },
  methods: {
    async init() {
      await currentGET('big5').then(res => {
        let filterData = []
        for (let row of res.rows) {
          filterData.push([row.materialName, row.materialModel, row.materialSpecification, row.materialUnit, row.totalInventory, row.productQuantity, '未知', row.totalCarbonEmission])
        }
        this.config = {
          ...this.config,
          data: filterData
        }
      })
    }
  },
  mounted() {
    this.init()
  }
}
</script>

<style>

</style>
